<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 顶部提示 -->
        <el-row>
          <el-col class="col-top">
            <span> 说明：目前支持学科和关键字条件筛选</span>
            <el-button
              type="success"
              size="small"
              icon="el-icon-edit"
              class="successBut"
              @click="$router.push('new')"
              >新增试题</el-button
            >
          </el-col>
        </el-row>
        <!-- 搜索框 -->
        <el-form ref="form" :model="query" label-width="80px">
          <el-row>
            <!-- 学科 -->
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="query.subjectID"
                  placeholder="请选择"
                  @change="onbranch"
                >
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :value="item.id"
                    :label="item.subjectName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  v-model="query.catalogID"
                  placeholder="请选择"
                  @change="catalogue"
                >
                  <el-option
                    v-for="(item, index) in directory"
                    :key="index"
                    :value="item.id"
                    :label="item.directoryName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 标签 -->
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="query.tags" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in tagList"
                    :key="index"
                    :value="item.id"
                    :label="item.tagName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 关键字 -->
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input v-model="query.keyword"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行========================== -->
          <el-row>
            <!-- 试题类型 -->
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="query.questionType" placeholder="请选择">
                  <el-option
                    v-for="(v, k, i) in questionType"
                    :key="i"
                    :label="v"
                    :value="k"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 难度 -->
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="query.difficulty" placeholder="请选择">
                  <el-option
                    v-for="(v, k, i) in difficulty"
                    :key="i"
                    :label="v"
                    :value="k"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 方向 -->
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="query.direction" placeholder="请选择">
                  <el-option
                    v-for="(v, k, i) in direction"
                    :key="i"
                    :label="v"
                    :value="k"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 录入人 -->
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="query.creatorID" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in userList"
                    :key="index"
                    :label="item.username"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行============ -->
          <el-row>
            <!-- 题目备注 -->
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="query.remarks"></el-input>
              </el-form-item>
            </el-col>
            <!-- 企业简称 -->
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="query.shortName"></el-input>
              </el-form-item>
            </el-col>
            <!-- 城市 -->
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                  class="city2"
                  v-model="query.province"
                  placeholder="请选择"
                  @change="onProvinceChange"
                >
                  <el-option
                    v-for="(v, k, i) in province"
                    :key="i"
                    :label="v"
                    :value="v"
                  >
                  </el-option>
                </el-select>
                <!-- 城市下的地区 -->
                <el-select
                  class="city2"
                  v-model="query.city"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(v, k, i) in citys"
                    :key="i"
                    :label="v"
                    :value="v"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="text-align:right">
              <el-button size="small" @click="cleanup">清除</el-button>
              <el-button type="primary" size="small" @click="fetLists"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </el-form>
        <el-alert type="info" :closable="false" class="el-icon-info">
          数据共{{ counts }}条
        </el-alert>
        <!-- 表格表头 -->
        <el-table :data="list" style="width: 100%">
          <el-table-column fixed prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" align="center">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" align="center">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" align="center">
            <template #default="{row}">
              {{ questionTypes(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column label="题干" align="center" width="200">
            <template #default="{row}">
              <p v-html="row.question"></p>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="170" align="center">
            <template #default="{row}">
              {{ formatDate(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column label="难度" align="center">
            <template #default="{row}">
              {{ difltyEnumerated(row.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" align="center">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-row>
                <!-- 预览按钮 -->
                <el-button
                  type="primary"
                  icon="el-icon-view"
                  :title="$t('table.preview')"
                  @click="addEmploy(scope.row.id)"
                  plain
                  circle
                ></el-button>
                <!-- 编辑按钮 -->
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  :title="$t('table.modify')"
                  @click="revise(scope.row)"
                  plain
                  circle
                ></el-button>
                <!-- 删除按钮 -->
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  :title="$t('table.delete')"
                  plain
                  circle
                  @click="deleTopic(scope.row)"
                ></el-button>
                <!-- 加入精选按钮 -->
                <el-button
                  type="warning"
                  icon="el-icon-check"
                  :title="$t('table.add')"
                  plain
                  circle
                  @click="addChoice(scope.row.id)"
                ></el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @current-change="pageChange"
          :page-sizes="params.pages"
          :page-size="5"
          @size-change="yeshu"
          layout="sizes, prev, pager, next, jumper"
          :total="counts"
          background
          class="burster"
        >
        </el-pagination>

        <!-- 预览组件 -->
        <questions-preview
          :is-preview="visible"
          @close-preview="visible = false"
          :cur-id="questionId"
        ></questions-preview>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, remove, choiceAdd } from "@/api/hmmm/questions";
import questionsPreview from "../components/questions-preview";
// 学科
import { list as subjectList } from "@/api/hmmm/subjects";
// 城市区域
import { provinces, citys } from "@/api/hmmm/citys";
// 目录接口
import { list as lista } from "@/api/hmmm/directorys";
// 用户列表
import { list as user } from "@/api/base/users";
// 标签接口
import { list as tag } from "@/api/hmmm/tags";
import dayjs from "dayjs";
export default {
  data() {
    return {
      query: {
        page: 1,
        pagesize: 5,
        subjectID: "", //学科
        difficulty: "", //难度
        questionType: "", // 试题类型
        tags: "", //标签名称
        province: "", //企业所在地省份
        city: "", // 企业所在城市
        keyword: "", // 关键字
        remarks: "", //	题目备注
        shortName: "", // 企业简称
        direction: "", // 	方向
        creatorID: "", // 录入人
        catalogID: "" // 目录
      },
      // 题库列表
      list: [],
      params: {
        page: 1,
        pagesize: 5,
        pages: [5, 10, 20, 50]
      },
      // 数据总数
      counts: 0,
      // 试题预览
      visible: false,
      // 预览时传入的id
      questionId: null,
      // 区域列表
      citys: [],
      // 城市列表
      province: provinces(),
      // 标签列表
      tagList: [],
      // 录入人列表
      userList: [],
      // 方向
      direction: [
        "o2o",
        "外包服务",
        "企业服务",
        "互联网金融",
        "企业咨询",
        "互联网",
        "电子商务",
        "其他"
      ],
      // 二级目录列表
      directory: [],
      // 学科列表
      options: [],
      // 试题类型
      questionType: {
        "1": "单选",
        "2": "多选",
        "3": "简答"
      },
      difficulty: {
        "1": "简单",
        "2": "一般",
        "3": "困难"
      }
    };
  },
  mounted() {
    this.fetList();
  },
  methods: {
    // 获取学科数据
    async liebiao() {
      const { data: res } = await subjectList({ pagesize: 100 });
      this.options = res.items;
      console.log(res);
    },
    // 当学科数据变化时触发
    async onbranch(val) {
      const { data: res } = await lista({ subjectID: val });
      this.directory = res.items;
      this.tagList = [];
    },
    // 当目录数据变化时触发
    catalogue() {
      this.getlabel();
    },
    // 渲染表格
    async fetList() {
      const { data: res } = await list(this.params);
      this.list = res.items;
      this.counts = res.counts;
    },
    // 筛选后表格
    async fetLists() {
      const { data: res } = await list(this.query);
      this.list = res.items;
      this.counts = res.counts;
    },
    // 获取标签数据
    async getlabel() {
      const { data: res } = await tag({
        subjectID: this.query.subjectID
      });
      this.tagList = res.items;
    },
    // 获取录入人列表
    async getCreator() {
      const { data } = await user({ pagesize: 100 });
      this.userList = data.list;
    },
    // 当城市列表发生变化时
    onProvinceChange(val) {
      this.query.city = "";
      this.citys = citys(val);
      console.log(this.citys);
    },
    // 清空数据
    cleanup() {
      for (const key in this.query) {
        if (key === "page" || key === "pagesize") {
          continue;
        }
        this.query[key] = "";
      }
      this.tagList = this.directory = [];
      this.fetList();
    },
    // 时间格式化
    formatDate(value, str = "YYYY-MM-DD HH:mm:ss") {
      return dayjs(value).format(str);
    },
    // 题型枚举
    questionTypes(type) {
      const map = {
        1: "单选",
        2: "多选",
        3: "简答"
      };
      return map[type];
    },
    // 难度枚举
    difltyEnumerated(type) {
      const map = {
        1: "简单",
        2: "一般",
        3: "困难"
      };
      return map[type];
    },
    // 分页切换
    pageChange(page) {
      this.params.page = page;
      this.fetList();
    },
    yeshu(pagesize) {
      this.params.pagesize = pagesize;
      this.fetList();
    },
    deleTopic(item) {
      this.$confirm("此操作将永久删除该题目，是否继续？", "提示")
        .then(async () => {
          await remove(item);
          this.fetList();
          this.$message.success("删除数据成功！！！");
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 预览
    async addEmploy(id) {
      // const { data } = await detail({ id: item.id });
      // data.questionType = item.questionType;
      // data.subject = item.subject;
      //传入试题id
      this.questionId = id;
      this.visible = true;
    },
    // 修改
    revise(item) {
      this.$router.push({
        path: "new",
        query: {
          id: item.id
        }
      });
    },
    // 加入精选
    addChoice(id) {
      choiceAdd({ id, choiceState: 1 })
        .then(data => {
          console.log(data);
          this.$message.success("加入精选成功！");
        })
        .catch(e => console.log(e));
    }
  },
  created() {
    this.fetList();
    this.fetLists();
    this.liebiao();
    // 获取录入人列表
    this.getCreator();
  },
  components: {
    questionsPreview
  }
};
</script>

<style scoped lang="scss">
.burster {
  text-align: right;
}
.successBut {
  float: right;
  font-size: 12px;
}
.col-top span {
  color: pink;
  font-size: 12px;
  line-height: 30px;
}
.col-top {
  height: 50px;
}
.city2 {
  width: 50%;
}
</style>
